<template>
    <div>
        <!-- 顶部按钮  -->
        <el-row :gutter="20" type="flex" justify="end" align="middle" style="text-align: right">
            <el-col :span="8">
                <el-checkbox v-model="checked">显示库存为0的仓库</el-checkbox>
            </el-col>
            <el-col :span="3">
                <el-button type="primary">新建仓库</el-button>
            </el-col>
        </el-row>

        <!-- 详情说明  -->
        <div class="info">
            <p>以门店命名的仓库，是随着门店的新增，自动产生的默认仓库，无法删除</p>
            <p>库存为0的仓库可以通过勾选的方式根据实际情况隐藏</p>
            <p>除了系统仓库外，可额外创建其他仓库管理商品库存</p>
        </div>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="仓库名称" prop="name"></el-table-column>
            <el-table-column label="所属区域" prop=""></el-table-column>
            <el-table-column label="全部总库存" prop=""></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEnter(scope.$index, scope.row)">进入</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    export default {
        name: "warehouse",
        data () {
            return {
                checked: true,
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                loading: false,
                total: ''

            }
        },
        created() {
        },
        methods: {
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                // this._giftSortList(this.page) // 获取礼品分类列表
            },
        },
        components: {
            Pagination
        },
    }
</script>

<style scoped lang="scss">
    .info {
        margin: 15px 0 20px 0;
        padding: 5px 20px;
        background-color: #E9F6FF;
        font-size: 12px;
        border-radius: 4px;
    }
</style>
